<!-- 底部导航栏组件 -->
<template>
  <van-tabbar v-model="activeTab" route>
    <van-tabbar-item icon="home-o" to="/home" replace>首页</van-tabbar-item>
    <van-tabbar-item icon="video-o" to="/video" replace>短视频</van-tabbar-item>
    <van-tabbar-item icon="shop-o" to="/market" replace>商城</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/profile" replace>我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeTab = ref(0)

// 路由映射表
const routeMap = {
  '/home': 0,
  '/video': 1,
  '/market': 2,
  '/profile': 3
}

// 监听路由变化
watch(() => route.path, (newPath) => {
  activeTab.value = routeMap[newPath] || 0
}, { immediate: true })
</script> 